import "./style.css"
import { Application, FileType, HighlightType } from "../lib"
let dom = document.getElementById("app") || document.body
const app = new Application(dom, {})
app.hook.onLoad(() => {
    app.connect("http://localhost:3000", "/socket.io")
})
app.hook.onConnect(() => {
    console.log("连接成功")
})

document.getElementById("loadFile")?.addEventListener("click", () => {
    // 加载文件
    app.cmd.file.load(
        (document.getElementById("filePath") as HTMLInputElement).value,
        (document.getElementById("fileType") as HTMLInputElement).value as FileType
    )
})

document.getElementById("getAttr")?.addEventListener("click", () => {
    // 获取物理量列表
    app.cmd.attribute.list().then((res: any) => {
        const { attributes } = res.Result
        attributes.forEach((item: any) => {
            const option = document.createElement("option")
            option.value = item
            option.innerText = item
                ; (document.getElementById("select") as HTMLSelectElement).appendChild(option)
        })
    })
})

document.getElementById("render")?.addEventListener("click", () => {
    // 渲染对应物理量
    app.cmd.render.attribute((document.getElementById("select") as HTMLSelectElement).value)
})

document.getElementById("cmd.topology.get")?.addEventListener("click", () => {
    app.cmd.topology.get()
})

document.getElementById("cmd.attribute.get")?.addEventListener("click", () => {
    // 获取物理量具体数据
    app.cmd.attribute.get((document.getElementById("select") as HTMLSelectElement).value).then((res: any) => {
        console.log(res)
    })
})

document.getElementById("cmd.render.mode")?.addEventListener("change", () => {
    // 切换渲染模式
    app.cmd.render.mode((document.getElementById("cmd.render.mode") as HTMLSelectElement).value as any)
})

document.getElementById("cmd.render.clear")?.addEventListener("click", () => {
    // 清空
    app.cmd.render.clear()
})

document.getElementById("cmd.actor.color.reset")?.addEventListener("click", () => {
    app.cmd.actor.color.reset()
})

document.getElementById("cmd.render.highlight")?.addEventListener("click", () => {
    const bid = (document.getElementById("highlight.bid") as HTMLInputElement).value
    const color = (document.getElementById("highlight.color") as HTMLInputElement).value.split(",").map((item) => +item)
    app.cmd.render.highlight(+bid, HighlightType.BLOCK, color as any)
})

document.getElementById("cmd.render.highlight.reset")?.addEventListener("click", () => {
    app.cmd.render.resetHighlight()
})

document.getElementById("cmd.mesh.list")?.addEventListener("click", () => {
    app.cmd.mesh.list().then((res: any) => {

    })
})

document.getElementById("cmd.render.highlight.celltype")?.addEventListener("click", () => {
    const bid = (document.getElementById("highlight.celltype") as HTMLInputElement).value
    app.cmd.render.highlight(bid, HighlightType.CELL_TYPE, [255, 0, 255, 255])
})

document.getElementById("cmd.render.show")?.addEventListener("click", () => {
    const list = (document.getElementById("cmd.render.show.v") as HTMLInputElement).value.split(",")
    app.cmd.render.show(list)
})

document.getElementById("cmd.fx.run")?.addEventListener("click", () => {
    const code = (document.getElementById("cmd.fx.run.value") as HTMLInputElement).value
    app.cmd.fx.run(code)
})

async function testDb() {
    await app.fx.add({
        name: "test",
        code: "print(1)"
    })
    const list = await app.fx.list()
    console.log("测试结果", list.length === 1)
    list[0].name = "test2"
    await app.fx.update(list[0].id!, list[0])
    const list2 = await app.fx.list()
    console.log("测试结果", list2.length === 1 && list2[0].name === "test2")
    await app.fx.remove(list[0].id!)
    const list3 = await app.fx.list()
    console.log("测试结果", list3.length === 0)
}

testDb()